---
# title: "Text Alignment"
title: "文本对齐"
# shortTitle: Text Align
shortTitle: 文本对齐
# description: "Utilities for controlling the alignment of text."
description: "用来控制文本对齐的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/textAlign'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用方法

<!-- Control the text alignment of an element using the `.text-left`, `.text-center`, `.text-right`, and `.text-justify` utilities. -->
使用 `.text-left`、`.text-center`、`.text-right` 和 `.text-justify` 功能类来控制元素的文本对齐方式。

```html purple
<template preview>
  <p class="text-left font-flow leading-5 text-3xl text-purple-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.</p>
</template>

<p class="**text-left** ...">Lorem ipsum dolor sit amet ...</p>
```

```html rose
<template preview>
  <p class="text-center font-flow leading-5 text-3xl text-rose-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.</p>
</template>

<p class="**text-center** ...">Lorem ipsum dolor sit amet ...</p>
```

```html emerald
<template preview>
  <p class="text-right font-flow leading-5 text-3xl text-emerald-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.</p>
</template>

<p class="**text-right** ...">Lorem ipsum dolor sit amet ...</p>
```

```html amber
<template preview>
  <p class="text-justify font-flow leading-5 text-3xl text-amber-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis fugit, enim molestiae praesentium eveniet, recusandae et error beatae facilis ex harum consequuntur, quia pariatur non. Doloribus illo, ullam blanditiis ab.</p>
</template>

<p class="**text-justify** ...">Lorem ipsum dolor sit amet ...</p>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the text alignment of an element at a specific breakpoint, add a `{screen}:` prefix to any existing text alignment utility. For example, use `md:text-center` to apply the `text-center` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的文本对齐，请在任何现有的文本对齐功能类前添加 `{screen}:` 前缀。例如，使用 `md:text-center` 来仅在中等大小及以上的屏幕应用 `text-center` 功能类。

```html
<p class="text-left **md:text-center** ...">Lorem ipsum dolor sit amet ...</p>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

<!-- ## Customizing -->
## 定制

<!-- ### Variants -->
### 变体

<Variants plugin="textAlign" name="text alignment" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="textAlign" name="text alignment" />
